function TagsFilterView(div, tagFilter, tags) {

	var self = this;
	this.tagsMap = {};

	this.toggleTag = function(tagId) {
		if(tagFilter.toggle(tagId)) {
			el(div + tagId).attr('class', 'tag-selected');
		} else {
			el(div + tagId).attr('class', 'tag');
		}
	};

	this.renderCloud = function() {
		var html = '<table width="100%"><tr><td colspan="3">';
		var spans = [];
		var minFreq = 0;
		var maxFreq = 0;
		var tag;
		var style;
		for(var tagId in this.tagsMap) {
			tag = this.tagsMap[tagId];
			style = tagFilter.isToggled(tag.id)? 'tag-selected': 'tag';
			spans.push('<span class="' + style + '" id="' + div + tag.id + '">' + tag.name + '</span>');
			minFreq = Math.min(minFreq, tag.frequency);
			maxFreq = Math.max(maxFreq, tag.frequency);
		}
		html += spans.join('') + '</td></tr><tr>' +
			'<td><input id="' + div + 'NewInput" type="text" style="float: left;" /></td>' +
			'<td><input id="' + div + 'NewBtn" type="button" value="+" style="float: left" /></td>' +
			'<td width="80%"><span id="' + div + 'Clean" class="link-button float-left">Очистить</span></td></tr></table>';

		el(div).html(html);
		el(div + 'NewInput').jqxInput({ width: 70, height: 22 });
		createSimpleButton(div + 'NewBtn', 24, 24, function() {

		});

		var fontSize;
		$.each(Object.keys(this.tagsMap), function(index, tagId) {
			tag = self.tagsMap[tagId];
			el(div + tagId).click(function() {
				self.toggleTag(tagId);
			});
			fontSize = 80 + 70 * (tag.frequency - minFreq) / (maxFreq - minFreq);
			el(div + tagId).css({ 'font-size': fontSize + '%'});
		});
	};

	var updateTags = function(tags) {
		$.each(tags, function(index, tag) {
			self.tagsMap[tag.id] = tag;
		});
		tagFilter.filter(self.tagsMap);
		self.renderCloud();
	};
	$.subscribe('tags-loaded', function(event, data) {
		updateTags(data.items);
	});
	updateTags(tags);
};